<template id="tmp-item-list">
    <div>
        <div class="mt-3 text-right">
            <el-form :inline="true" size="mini" class="demo-form-inline">
                <el-form-item label="entry">
                    <el-input v-model="search.entry" placeholder="entry" :clearable="true" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="search.key" placeholder="名称" :clearable="true" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <component-item-class-select v-model="search.class" :clearable="true"></component-item-class-select>
                </el-form-item>
                <el-form-item label="品质">
                    <el-select v-model="search.quality" :clearable="true" placeholder="请选择品质">
                        <el-option label="灰色粗糙" :value="0"></el-option>
                        <el-option label="白色普通" :value="1"></el-option>
                        <el-option label="绿色精良" :value="2"></el-option>
                        <el-option label="蓝色优秀" :value="3"></el-option>
                        <el-option label="紫色" :value="4"></el-option>
                        <el-option label="橙装" :value="5"></el-option>
                        <el-option label="金色" :value="6"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>


        </div>
        <el-table
            :data="list"
            style="width: 100%">
            <el-table-column
                prop="entry"
                width="80"
                label="entry">
            </el-table-column>

            <el-table-column
                prop="RequiredLevel"
                width="80"
                label="需要等级">
            </el-table-column>
            <el-table-column
                prop="ItemLevel"
                width="80"
                label="物品等级">
            </el-table-column>
            <el-table-column
                label="类型"
                width="200">
                <template slot-scope="scope">
                    <component-item-class-show :item="scope.row"></component-item-class-show>
                </template>
            </el-table-column>
            <el-table-column
                prop="iconPath"
                label=""
                width="60">
                <template slot-scope="scope">
                    <img :src="scope.row.iconPath" style="height: 40px; width: 40px" alt="">
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称">
                <template slot-scope="scope">
                    <component-item-name :name="scope.row.name" :quality="scope.row.Quality"></component-item-name>
                </template>
            </el-table-column>
            <el-table-column
                width="200">
                <template slot-scope="scope">
                    <el-button type="primary" plain size="small" @click="handleEditor(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
{{--            <el-table-column
                prop="Quality"
                label="Quality">
            </el-table-column>--}}

        </el-table>

        <div class="text-center mt-3" v-if="list">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search.total">
            </el-pagination>
        </div>

        <component-item-edit :item.sync="curItem" :visible.sync="showEditor"></component-item-edit>
    </div>
</template>
<script>
    Vue.component("component-item-list", {
        data() {
            return {
                list:[],
                curItem:null,
                showEditor:false,
                search: {
                    entry:'',
                    key:'',
                    quality:'',
                    class:[],
                    size: 10,
                    page:1,
                    total: 1,
                }
            };
        },
        template:"#tmp-item-list",
        mounted() {
            // this.getList();
        },
        methods: {
            getList(){
                post('itemList', this.search,res=>{
                    console.log(res);
                    this.list=res.data.data;
                    this.search.total=res.data.total;
                },this)
            },
            handleEditor(item){
                this.curItem=item;
                this.curItem.classes=[''+this.curItem.class,this.curItem.class+'_'+this.curItem.subclass];
                this.showEditor=true;
            },
            handleSearch(){
                this.search.page=1;
                this.getList();
            },
            handleSizeChange(size){
                this.search.size=size;
                this.getList();
            },
            handleCurrentChange(page){
                this.search.page=page;
                this.getList();
            }
        }
    });
</script>

